<template>
	<view class="custom-tabbar" :style="{ paddingBottom: safeBottom + 'px' }">
		<view class="tabbar-bg"></view>
		<view
			class="tabbar-item"
			v-for="(item, index) in tabList"
			:key="index"
			@click="switchTab(item, index)"
		>
			<view class="item-wrapper">
				<view class="icon-wrapper">
					<view class="icon-bg" :class="{ active: currentTab === index }"></view>
					<image
						class="tab-icon"
						:src="currentTab === index ? item.selectedIconPath : item.iconPath"
						mode="aspectFit"
					></image>
					<view class="dot" v-if="item.dot"></view>
					<view class="badge" v-if="item.badge">{{ item.badge > 99 ? '99+' : item.badge }}</view>
				</view>
				<text class="tab-text" :class="{ active: currentTab === index }">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'zdy-tabbar',
		props: {
			currentTab: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				safeBottom: 0, // 安全区域底部高度
				tabList: [{
					pagePath: "/pages/index/index",
					iconPath: "/static/tab-home.png",
					selectedIconPath: "/static/tab-home-current.png",
					text: "首页"
				}, {
					pagePath: "/pages/category/category",
					iconPath: "/static/tab-cate.png",
					selectedIconPath: "/static/tab-cate-current.png",
					text: "分类"
				}, {
					pagePath: "/pages/cart/cart",
					iconPath: "/static/tab-cart.png",
					selectedIconPath: "/static/tab-cart-current.png",
					text: "购物车",
					badge: 0 // 购物车数量，需要从store获取
				}, {
					pagePath: "/pages/user/user",
					iconPath: "/static/tab-my.png",
					selectedIconPath: "/static/tab-my-current.png",
					text: "我的"
				}]
			}
		},
		created() {
			// 获取底部安全区域高度
			this.getSafeBottom();
			// 获取购物车数量
			this.getCartCount();
		},
		mounted() {
			// #ifndef MP-WEIXIN
			// 监听页面切换事件
			uni.$on('onPageShow', this.handlePageShow);
			// #endif
		},
		beforeDestroy() {
			// #ifndef MP-WEIXIN
			// 移除页面显示监听
			uni.$off('onPageShow', this.handlePageShow);
			// #endif
		},
		methods: {
			// 获取底部安全区域高度
			getSafeBottom() {
				// #ifdef APP-PLUS || MP-WEIXIN
				try {
					const systemInfo = uni.getSystemInfoSync();
					// 兼容不同版本小程序的API差异
					if (systemInfo.safeAreaInsets) {
						this.safeBottom = systemInfo.safeAreaInsets.bottom;
					} else if (systemInfo.safeArea) {
						// 旧版本API兼容
						const screenHeight = systemInfo.screenHeight;
						const safeAreaBottom = systemInfo.safeArea.bottom;
						this.safeBottom = screenHeight - safeAreaBottom;
					} else {
						// 默认值
						this.safeBottom = 0;
					}
				} catch(e) {
					console.log('获取系统信息失败', e);
					this.safeBottom = 0;
				}
				// #endif
				
				// #ifdef H5
				this.safeBottom = 0;
				// #endif
			},
			// 获取购物车数量
			getCartCount() {
				// 从store获取购物车数量
				try {
					const cartCount = this.$store.state.app.cartCount || 0;
					this.tabList[2].badge = cartCount > 0 ? cartCount : null;
				} catch(e) {
					console.log('获取购物车数量失败', e);
				}
			},
			// 处理页面显示事件
			handlePageShow() {
				// 重新获取当前tab状态
				this.$emit('change', this.getCurrentTab());
			},
			// 获取当前tab索引
			getCurrentTab() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const route = currentPage.route;
				
				const tabList = [
					'pages/index/index',
					'pages/category/category',
					'pages/cart/cart',
					'pages/user/user'
				];
				
				return tabList.findIndex(item => item === route);
			},
			// 切换tab
			switchTab(item, index) {
				// 防止重复点击当前页面
				if (this.currentTab === index) return;
				
				// 跳转页面
				uni.switchTab({
					url: item.pagePath,
					success: () => {
						this.$emit('change', index);
						// 通知其他组件页面已切换
						uni.$emit('onTabChanged', index);
					},
					fail: (err) => {
						console.log('切换tab失败', err);
						// 在小程序中，如果switchTab失败，尝试使用reLaunch
						// #ifdef MP-WEIXIN
						uni.reLaunch({
							url: item.pagePath
						});
						// #endif
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	background: transparent;
	overflow: hidden;
	
	.tabbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.98));
		backdrop-filter: blur(20rpx);
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
		border-radius: 40rpx 40rpx 0 0;
	}
	
	.tabbar-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16rpx 0;
		position: relative;
		z-index: 1;
		
		.item-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			position: relative;
			transition: all 0.3s ease;
			
			.icon-wrapper {
				position: relative;
				margin-bottom: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-bg {
					position: absolute;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: rgba(233, 51, 35, 0.1);
					transform: scale(0);
					transition: all 0.3s ease;
					
					&.active {
						transform: scale(1);
					}
				}
				
				.tab-icon {
					width: 52rpx;
					height: 52rpx;
					transition: all 0.3s ease;
					z-index: 2;
					position: relative;
					
					/* 添加图标动画效果 */
					&:active {
						transform: scale(0.9);
					}
				}
				
				.dot {
					position: absolute;
					top: -4rpx;
					right: -4rpx;
					width: 16rpx;
					height: 16rpx;
					background: linear-gradient(135deg, #ff6b6b, #e93323);
					border-radius: 50%;
					border: 3rpx solid #ffffff;
					z-index: 3;
					animation: pulse 2s infinite;
				}
				
				.badge {
					position: absolute;
					top: -8rpx;
					right: -8rpx;
					min-width: 36rpx;
					height: 36rpx;
					background: linear-gradient(135deg, #ff6b6b, #e93323);
					color: #ffffff;
					font-size: 20rpx;
					font-weight: 600;
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 8rpx;
					border: 3rpx solid #ffffff;
					z-index: 3;
					transform: scale(0.9);
					box-shadow: 0 4rpx 8rpx rgba(233, 51, 35, 0.3);
					animation: bounceIn 0.5s ease;
				}
			}
			
			.tab-text {
				font-size: 22rpx;
				color: #999999;
				transition: all 0.3s ease;
				font-weight: 400;
				
				&.active {
					color: #e93323;
					font-weight: 600;
					transform: scale(1.05);
				}
			}
		}
		
		&:active {
			.item-wrapper {
				transform: scale(0.95);
			}
		}
	}
}

/* 动画效果 */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(233, 51, 35, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10rpx rgba(233, 51, 35, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(233, 51, 35, 0);
	}
}

@keyframes bounceIn {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(0.9);
	}
}

/* 点击波纹效果 */
.tabbar-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100rpx;
	height: 100rpx;
	background: radial-gradient(circle, rgba(233, 51, 35, 0.15) 0%, rgba(233, 51, 35, 0) 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.6s ease;
	pointer-events: none;
}

.tabbar-item:active::after {
	transform: translate(-50%, -50%) scale(1);
}
</style>